<template>
    <div>
        <el-page-header style="margin-bottom: 20px" @back="$router.go(-1)"></el-page-header>
        <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    头像
                </template>
                <el-avatar :size="size" :src="userInfo.img"></el-avatar>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{userInfo.alias}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    个人简介
                </template>
                {{userInfo.remark}}
            </el-descriptions-item>
        </el-descriptions>

    </div>
</template>

<script>
    export default {
        name: 'person',
        data(){
            return {
                userInfo:{},
            }
        },
        computed: {
            userId() {
                let userId = parseInt(this.$route.query.userId);
                return userId;
            },
        },
        methods:{
            getUserInfo(userId){
                this.$api.User.showInfo(userId).then((data) => {
                    if (data && data.code === 0) {
                        this.userInfo = data.user
                    }
                })
            }
        },
        activated(){
            this.getUserInfo(this.userId)
        },
        mounted(){
            this.$nextTick(() => {
                this.getUserInfo(this.userId)
            })
        }
    };
</script>

<style scoped>

</style>